Revision:
<div id="grid-gamma">
<section id="row-one1"><div>1</div></section>
<section id="row-two1"><div>1</div><div>2</div></section>
<section id="row-three1"><div>1</div><div>2</div><div>3</div></section>
<section id="row-four1"><div>1</div><div>2</div><div>3</div><div>4</div></section>
<section id="row-five1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></section>
<section id="row-six1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></section>
<section id="row-seven1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></section>
<section id="row-eight1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></section>
<section id="row-nine1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></section>
<section id="row-ten1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></section>
<section id="row-eleven1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div></section>
<section id="row-twelve1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></section>
</div>
<div id="grid-delta">
<section id="row-a1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-b1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-c1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-d1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-e1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-f1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-g1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-h1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-i1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-j1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-k1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
</div>
<style>
html {box-sizing: border-box; font-size: 100%; background-image: linear-gradient(35deg, lightgrey, orange, darkgray);}
*, *:before, *:after {box-sizing: inherit;}
body {background: transparent; font-family: 'Open Sans', sans-serif; font-size: 1.2vw;padding: 0; margin: 0;}
h2{font-size: 2vw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
#grid-gamma, #grid-delta{grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(2vh, auto); gap: 1vw; width: 96vw; height: auto; font-size: 2vw;}
#grid-gamma section, #grid-delta section{margin-left: 1vw; text-align: center;margin-bottom: 1vw; font-weight: bold; color: red;}
#grid-gamma section, #grid-delta section{display: grid; grid-auto-flow: column dense;}
div:not(#grid, #grid-2){border: 0.2vw solid darkgreen; border-collapse: collapse;}
#row-one1{grid-column:1/13; grid-row:1/2;animation: swift 15s linear alternate infinite;}
#row-two1{grid-column:1/13; grid-row:2/3;animation: swift 15s linear alternate infinite;}
#row-three1{grid-column:1/13; grid-row:3/4;animation: swift 15s linear alternate infinite;}
#row-four1{grid-column:1/13; grid-row:4/5;animation: swift 15s linear alternate infinite;}
#row-five1{grid-column:1/13; grid-row:5/6;animation: swift 15s linear alternate infinite;}
#row-six1{grid-column:1/13; grid-row:6/7;animation: swift 15s linear alternate infinite;}
#row-seven1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-eight1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-nine1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-ten1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-eleven1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-twelve1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#grid-gamma section:nth-child(odd), #grid-delta section:nth-child(odd){background-image:radial-gradient(circle at 10% 2%,blue, cyan, yellow);}
#grid-gamma section:nth-child(even), #grid-delta section:nth-child(even){background-image:radial-gradient(circle at 2% 3%,brown, burlywood, AliceBlue);}
#row-a1{grid-template-columns: 1fr 11fr;animation: swift2 15s linear alternate infinite;}
#row-b1{grid-template-columns: 2fr 10fr;animation: swift2 15s linear alternate infinite;}
#row-c1{grid-template-columns: 3fr 9fr;animation: swift2 15s linear alternate infinite;}
#row-d1{grid-template-columns: 4fr 8fr;animation: swift2 15s linear alternate infinite;}
#row-e1{grid-template-columns: 5fr 7fr;animation: swift2 15s linear alternate infinite;}
#row-f1{grid-template-columns: 6fr 6fr;animation: swift2 15s linear alternate infinite;}
#row-g1{grid-template-columns: 7fr 5fr;animation: swift2 15s linear alternate infinite;}
#row-h1{grid-template-columns: 8fr 4fr;animation: swift2 15s linear alternate infinite;}
#row-i1{grid-template-columns: 9fr 3fr;animation: swift2 15s linear alternate infinite;}
#row-j1{grid-template-columns: 10fr 2fr;animation: swift2 15s linear alternate infinite;}
#row-k1{grid-template-columns: 11fr 1fr;animation: swift2 15s linear alternate infinite;}
.col-a1{background-image:linear-gradient(12deg, red, blue, green);}
.col-b1{background-image:linear-gradient(12deg, yellow, blue, lightgrey);}
@keyframes swift{
0%{transform: scale(1) rotateX(0deg)}
50%{transform: scale(.25) rotateX(360deg);}
100%{transform: scale(1) rotateX(0deg)}
}
@keyframes swift2{
0%{transform: scale(1) rotateY(0deg)}
50%{transform: scale(.75) rotateY(360deg);}
100%{transform: scale(1) rotateY(0deg)}
}
</style>